<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<title>Test Fancytree Filter Ext</title>

		<!-- Include latest jQuery and Fancytree from CDN ... -->
		<!--
	<script src="https://code.jquery.com/jquery-3.6.0.js"></script>

	<link href="https://cdn.jsdelivr.net/npm/jquery.fancytree/dist/skin-win8/ui.fancytree.min.css"
		rel="stylesheet">
	<script src="https://cdn.jsdelivr.net/npm/jquery.fancytree/dist/jquery.fancytree-all-deps.min.js">
		</script>
-->
		<!-- ... or include from own asset folders: -->
		<script src="../../lib/jquery.js"></script>
		<script src="../../lib/jquery-ui.custom.js"></script>

		<link href="../../src/skin-lion/ui.fancytree.css" rel="stylesheet" />
		<script src="../../src/jquery.fancytree.js"></script>
		<script src="../../src/jquery.fancytree.filter.js"></script>

		<style type="text/css">
			.fancytree-ext-filter-dimm tr.fancytree-match span.fancytree-title,
			.fancytree-ext-filter-dimm span.fancytree-node.fancytree-match span.fancytree-title {
				color: black;
				font-weight: unset !important;
			}
		</style>

		<script type="text/javascript">
			$(function() {
				// Initialize Fancytree
				$('#tree').fancytree({
					extensions: ['filter'],
					source: { url: '../../demo/ajax-tree-plain.json' },
					autoCollapse: true,
					checkbox: true,
					quicksearch: true,
					filter: {},
					init: function(event, data) {},
					lazyLoad: function(event, data) {
						data.result = { url: 'sample_sub.json', debugDelay: 5000 };
					},
					loadChildren: function(event, data) {
						// data.node.fixSelection3FromEndNodes();
					},
				});
				var tree = $.ui.fancytree.getTree('#tree');

				// Check these options by default
				const defaultOptions = [
					'#autoExpand',
					'#highlight',
					'#hideExpandedCounter',
					'#fuzzy',
					'#hideMode'
				];
				const options = $('#options');
				defaultOptions.forEach(id => {
					options.find(id).prop('checked', true);
				});

				/*
				 * Event handlers for our little demo interface
				 */
				$('input[name=search]')
					.on('keyup', function(e) {
						var n,
							tree = $.ui.fancytree.getTree(),
							args = 'autoApply autoExpand fuzzy hideExpanders highlight leavesOnly nodata'.split(' '),
							opts = {},
							filterFunc = $('#branchMode').is(':checked') ? tree.filterBranches : tree.filterNodes,
							match = $(this).val();

						$.each(args, function(i, o) {
							opts[o] = $('#' + o).is(':checked');
						});
						opts.mode = $('#hideMode').is(':checked') ? 'hide' : 'dimm';

						if ((e && e.which === $.ui.keyCode.ESCAPE) || tools.trim(match) === '') {
							$('button#btnResetSearch').trigger("click");
							return;
						}
						if ($('#regex').is(':checked')) {
							// Pass function to perform match
							n = filterFunc.call(
								tree,
								function(node) {
									return new RegExp(match, 'i').test(node.title);
								},
								opts
							);
						} else {
							// Pass a string to perform case insensitive matching
							n = filterFunc.call(tree, match, opts);
						}
						$('button#btnResetSearch').attr('disabled', false);
						$('span#matches').text('(' + n + ' matches)');
					})
					.trigger("focus");

				$('fieldset input:checkbox').change(function(e) {
					var id = $(this).attr('id'),
						flag = $(this).is(':checked');

					// Some options can only be set with general filter options (not method args):
					switch (id) {
						case 'counter':
						case 'hideExpandedCounter':
							tree.options.filter[id] = flag;
							break;
					}
					tree.clearFilter();
					$('input[name=search]').keyup();
				});

				$('button#btnResetSearch')
					.click(function(e) {
						$('input[name=search]').val('');
						$('span#matches').text('');
						$.ui.fancytree.getTree().clearFilter();
					})
					.attr('disabled', true);

				$('#button1').click(function(event) {
					var tree = $.ui.fancytree.getTree(),
						node = tree.getActiveNode();
					tree.filterBranches('folder');
				});
			});
		</script>
	</head>

	<body class="example">
		<h1>Playground To Test Filter Ext</h1>

		<p class="description">
			(TODO: optionally add a short description here...)
		</p>

		<button id="button1">Test 1</button>
		<p>
			<label>Filter:</label>
			<input name="search" placeholder="Filter..." autocomplete="off" />
			<button id="btnResetSearch">&times;</button>
			<span id="matches"></span>
		</p>

		<fieldset id="options">
			<legend>Options</legend>
			<label for="regex">
				<input type="checkbox" id="regex" />
				Regular expression
			</label>
			<br />
			<label for="hideMode">
				<input type="checkbox" id="hideMode" />
				Hide unmatched nodes
			</label>
			<label for="autoExpand">
				<input type="checkbox" id="autoExpand" />
				Auto expand
			</label>
			<label for="branchMode">
				<input type="checkbox" id="branchMode" />
				Match whole branch
			</label>
			<label for="leavesOnly">
				<input type="checkbox" id="leavesOnly" />
				Match end nodes only
			</label>
			<br />
			<label for="fuzzy">
				<input type="checkbox" id="fuzzy" />
				Fuzzy
			</label>
			<label for="hideExpanders">
				<input type="checkbox" id="hideExpanders" />
				hideExpanders
			</label>
			<label for="highlight">
				<input type="checkbox" id="highlight" />
				Highlight
			</label>
			<label for="nodata">
				<input type="checkbox" id="nodata" />
				nodata
			</label>
			<br />
			<label for="counter">
				<input type="checkbox" id="counter" />
				Add counter badges
			</label>
			<label for="hideExpandedCounter">
				<input type="checkbox" id="hideExpandedCounter" />
				hideExpandedCounter
			</label>
		</fieldset>

		<hr />

		<div id="tree"></div>
	</body>
</html>
